<script lang="ts" setup>
	import {
		reactive,
		ref
	} from 'vue'
	import {
		useRouter
	} from 'uni-mini-router'
	import {
		getCurrentInstance
	} from 'vue'
	import {
		onShow,
		onHide,
		onLoad,
		onReachBottom,
		onUnload
	} from '@dcloudio/uni-app'
	import {
		userStore
	} from '@/pinia';
	const userStoreInfo = userStore();
	const {
		proxy,
	} = getCurrentInstance()
	const router = useRouter()
	let postId = ref()
	let index = ref()
	onLoad((option) => {
		postId.value = option.id
		index.value = option.index
		getDetail(option.id)
	})
	onUnload(() => {
		uni.$emit('uploadLc', {
			data: detailObj.value,
			index: index.value
		})
	})
	onReachBottom(() => {

	})
	let detailObj = ref(null)
	let pageNum = ref(1)
	let pinglunArr = ref([])
	let sendMsg = ref('')
	const getDetail = (id) => {
		proxy.$req('GET', proxy.$api.shequDetail, {
			id,
		}).then((res) => {
			detailObj.value = res.result
			detailObj.value.content = detailObj.value.content.replace(/\<img/gi,
				'<img style="width:100%;margin:12rpx 0;border-radius:4px;"')
			getPinglun()
		})
	}
	const getPinglun = () => {
		proxy.$req('GET', proxy.$api.getPinglun, {
			communityId: detailObj.value.id,
			pageNo: pageNum.value,
			pageSize: 30,
		}).then((res) => {
			pinglunArr.value = pinglunArr.value.concat(res.result.records)
		})
	}
	const postPinglun = () => {
		if (sendMsg.value == '') return
		proxy.$req('POST', proxy.$api.tieziPinglun, {
			communityId: detailObj.value.id,
			memberId: userStoreInfo.userInfo.id,
			content: sendMsg.value,
		}).then((res) => {
			uni.$u.toast(res.message)
			if (res.success) {
				pageNum.value = 1
				pinglunArr.value = []
				sendMsg.value = ''
				getPinglun()
			}
		})
	}
	const lcFun = (type, way, item) => {
		//收藏点赞
		proxy.$req('POST', proxy.$api.likeAndCollect, {
			id: item.id,
			moduleType: 3,
			operateType: type,
			userId: userStoreInfo.userInfo.id,
			updateType: way
		}).then((res) => {
			if (res.success && type == 0) {
				detailObj.value.isLike = !detailObj.value.isLike
				if (detailObj.value.isLike) {
					detailObj.value.likeNum++
				} else if (detailObj.value.likeNum > 0) {
					detailObj.value.likeNum--
				}
			} else if (res.success && type == 1) {
				detailObj.value.isCollect = !detailObj.value.isCollect
				if (detailObj.value.isCollect) {
					detailObj.value.collectNum++
				} else if (detailObj.value.collectNum > 0) {
					detailObj.value.collectNum
				}
			}
		})
	}
</script>
<template>
	<view class="containerAll" v-if="detailObj!=null">
		<view class="messageBox">
			<view class="mbUser">
				<image class="mbuAvatar" :src="detailObj.memberAvatar" mode=""></image>
				<view class="mbuInfo">
					<text>{{ detailObj.memberNickName }}</text>
					<text>{{ detailObj.updateTime }}</text>
				</view>
			</view>
			<view class="mbContent">
				<view class="mbcTit">
					<u-parse :content="detailObj.content"></u-parse>
				</view>
				<!-- <image class="mbcImg" src="../../static/images/gys.png" mode="widthFix"></image> -->
			</view>
			<view class="funcArea r-flex-around-center">
				<view class="fa1 r-flex-center-center"
					@click.stop="lcFun(1,detailObj.isCollect?'uncollect':'collect',detailObj)">
					<u-icon name="star-fill" size="18" color="#CB645E" v-if="detailObj.isCollect"></u-icon>
					<u-icon name="star" size="18" v-if="!detailObj.isCollect"></u-icon>
					<text :style="{color:detailObj.isCollect?'#CB645E;':''}">收藏</text>
				</view>
				<!-- <view class="fa1 r-flex-center-center">
					<u-icon name="chat" size="20"></u-icon>
					<text>评论</text>
				</view> -->
				<view class="fa1 r-flex-center-center"
					@click.stop="lcFun(0,detailObj.isLike?'unlike':'like',detailObj)">
					<u-icon name="thumb-up-fill" color="#CB645E" size="20" v-if="detailObj.isLike"></u-icon>
					<u-icon name="thumb-up" size="20" v-if="!detailObj.isLike"></u-icon>
					<text :style="{color:detailObj.isLike?'#CB645E;':''}">{{ detailObj.likeNum }}</text>
				</view>
			</view>
		</view>
		<view style="font-size: 32rpx;
						font-weight: 600;
						color: rgba(0,0,0,0.85);
						padding: 32rpx;
						background-color: #fff;">
			全部评论
		</view>
		<view class="pinglun" v-for="(item,index) in pinglunArr" :key="index">
			<view class="plUser">
				<image class="mbuAvatar" :src="item.memberAvatar" mode=""></image>
				<view class="mbuInfo">
					<text>{{ item.memberNickName }}</text>
				</view>
			</view>
			<view class="plCon">
				<view class="pc1">
					{{ item.content }}
				</view>
				<view class="pc2">
					{{ item.updateTime }}
				</view>
			</view>
		</view>
	</view>
	<view class="imgInsert r-flex-between-center">
		<!-- <image class="" src="../../../static/icon/picture.png" mode="" @click="insertImg"></image> -->
		<view class="inp">
			<u-input v-model="sendMsg" placeholder="请输入内容" clearable shape="circle"></u-input>
		</view>
		<view class="btn" @click="postPinglun">
			发送
		</view>
	</view>
</template>
<style lang="scss">
	page {
		background-color: #fafafa;
	}

	.containerAll {
		// margin-top: -280rpx;
		padding-bottom: 150rpx;
	}

	view {
		box-sizing: border-box;
	}

	.messageBox {
		width: 100%;
		margin: 30rpx auto;
		padding: 32rpx;
		background: #FFFFFF;
		box-shadow: 8rpx 8rpx 32rpx 0rpx rgba(0, 0, 0, 0.04);
		border: 2rpx solid #FFFFFF;

		.mbUser {
			width: 100%;
			height: 80rpx;
			display: flex;
			align-items: center;

			.mbuAvatar {
				width: 80rpx;
				height: 80rpx;
				border-radius: 40rpx;
			}

			.mbuInfo {
				margin-left: 20rpx;
				width: 500rpx;
				height: 70rpx;
				display: flex;
				flex-direction: column;
				align-items: flex-start;
				justify-content: space-between;

				text:nth-child(1) {
					font-size: 28rpx;
				}

				text:nth-child(2) {
					font-size: 20rpx;
					color: rgba(0, 0, 0, 0.45);
				}
			}
		}

		.mbContent {
			width: 100%;

			.mbcTit {
				margin: 28rpx 0;
				font-size: 32rpx;
				font-weight: 400;
				color: rgba(0, 0, 0, 0.85);
			}

			.mbcImg {
				width: 100%;
			}
		}

		.funcArea {
			width: 100%;
			height: 50rpx;
			margin-top: 30rpx;
			padding: 0 20rpx;
			font-size: 24rpx;
			font-weight: 400;
			color: rgba(0, 0, 0, 0.65);

			.fa1 {
				text {
					margin-left: 6rpx;
				}
			}
		}
	}

	.pinglun {
		width: 100%;
		// margin: 30rpx auto;
		padding: 32rpx;
		background: #FFFFFF;
		box-shadow: 8rpx 8rpx 32rpx 0rpx rgba(0, 0, 0, 0.04);
		border-bottom: 2rpx solid rgba(0, 0, 0, 0.05);

		.plUser {
			width: 100%;
			display: flex;
			align-items: center;

			.mbuAvatar {
				width: 64rpx;
				height: 64rpx;
				border-radius: 40rpx;
			}

			.mbuInfo {
				margin-left: 20rpx;
				width: 500rpx;
				height: 64rpx;
				display: flex;
				flex-direction: column;
				align-items: flex-start;
				justify-content: space-between;

				text:nth-child(1) {
					font-size: 28rpx;
					padding-top: 4rpx;
				}

				text:nth-child(2) {
					font-size: 20rpx;
					color: rgba(0, 0, 0, 0.45);
				}
			}
		}

		.plCon {
			margin-left: 84rpx;

			.pc1 {
				font-size: 28rpx;
				font-weight: 400;
				color: rgba(0, 0, 0, 0.85);
				margin-bottom: 14rpx;
			}

			.pc2 {
				font-size: 20rpx;
				font-weight: 400;
				color: rgba(0, 0, 0, 0.45);
			}
		}
	}

	.imgInsert {
		width: 100%;
		height: 112rpx;
		position: fixed;
		bottom: 0;
		left: 0rpx;
		box-shadow: 8rpx 8rpx 32rpx 0rpx rgba(0, 0, 0, 0.04);
		border: 2rpx solid #e7e7e7;
		background-color: #FFFFFF;
		padding: 0 32rpx;

		image {
			width: 48rpx;
			height: 48rpx;
			margin-left: 32rpx;
		}

		.inp {
			width: 550rpx;
		}

		.btn {
			width: 104rpx;
			height: 56rpx;
			background: #CB645E;
			line-height: 56rpx;
			font-size: 24rpx;
			font-weight: 400;
			color: #FFFFFF;
			text-align: center;
			border-radius: 6rpx;
		}
	}
</style>